<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { cityStore } from '../stores/city'
import { cityList, caseList } from '../api/cityList'
import { followDesignerStore } from '../stores/userInfo'
export default defineComponent({
    setup() {
        let store = cityStore()//pinia状态的城市状态
        let city = ref(cityStore().$state.city)//等于城市状态的值
        let show = ref(false);//选择城市列表的状态
        let indexList: any = ref<Array<object>>([])//所有城市列表
        let caseLists: any = ref()
        //获取城市列表方法
        const cityListFun: () => void = (): void => {
            cityList().then((data: any) => {
                indexList.value = data
            })
        }
        const caseListFun: () => void = (): void => {
            caseList().then((data: any) => {
                caseLists.value = data.data
                console.log(caseLists.value);
            })
        }
        //改变城市的时候，改变pinia的城市状态
        const changeCity = (changedCity: any) => {
            show.value = false
            store.$patch((state: any) => {

                state.city = changedCity;
            })
            city.value = cityStore().$state.city
        }
        onMounted(() => {
            cityListFun()
            caseListFun()
        })
        return {
            city,
            show,
            indexList,
            changeCity,
            caseLists,
        }
    },
})
</script>



<template>
    <div class="renovation">
        <div class="topbar">
            <div class="topbaritem">
                <div class="positioning" @click="show = true">{{ city }}</div>
                <div class="input"><van-search shape="round" placeholder="宜家卫生间" />
                </div>
                <span class="icon-jurassic_info iconfont"></span>
            </div>
        </div>
        <div class="renovationoption">
            <div class="item">
                <p>案例</p>
                <p>找设计师</p>
                <p>本地实景案例</p>
                <div class="icon">
                    <img src="../assets/images/renovation-Icon/shouye.png">
                </div>
            </div>
            <div class="item">
                <p>智能</p>
                <p>找设计师</p>
                <p>AI精准匹配</p>
                <div class="icon">
                    <img src="../assets/images/renovation-Icon/dingwei.png">
                </div>
            </div>
            <div class="item">
                <p>装修</p>
                <p>预算清单</p>
                <p>快速获取报价</p>
                <div class="icon">
                    <img src="../assets/images/renovation-Icon/Calculatorjisuanqi.png">
                </div>
            </div>
        </div>
        <div class="ranking">
            <div class="topbar">
                <p>装修设计榜</p>
                <p>完整榜单></p>
            </div>
        </div>

        <van-swipe :loop="false" :width="150" :show-indicators="false">
            <van-swipe-item>
                <div class="swiperitemlist">
                    <div class="imgbox">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdfdc0285-f924-4817-ba3a-f6814b4ccece%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688368435&t=e43ae238ae3c194b9d7ebb6b628071d9"
                            alt="">
                        <div class="mask">
                            <p>现代榜</p>
                        </div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top1.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top2.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top3.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="swiperitemlist">
                    <div class="imgbox">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdfdc0285-f924-4817-ba3a-f6814b4ccece%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688368435&t=e43ae238ae3c194b9d7ebb6b628071d9"
                            alt="">
                        <div class="mask luxurious">
                            <p>轻奢榜</p>
                        </div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top1.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top2.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top3.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="swiperitemlist">
                    <div class="imgbox">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdfdc0285-f924-4817-ba3a-f6814b4ccece%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688368435&t=e43ae238ae3c194b9d7ebb6b628071d9"
                            alt="">
                        <div class="mask big">
                            <p>大户型榜</p>
                        </div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top1.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top2.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top3.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="swiperitemlist">
                    <div class="imgbox">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdfdc0285-f924-4817-ba3a-f6814b4ccece%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688368435&t=e43ae238ae3c194b9d7ebb6b628071d9"
                            alt="">
                        <div class="mask  middle">
                            <p>中户型榜</p>
                        </div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top1.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top2.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                    <div class="swiperitem">
                        <div class="user">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F19%2F20160719002329_aEHjX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688369780&t=1a0efed65306a11a2962d70884e20e41"
                                alt="">
                            <img src="../assets/images/renovation-Icon/ic_d_ranking_top3.png" alt="">
                        </div>
                        <div class="namebox">十里居间</div>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div class="company" v-if="caseLists" v-for="(item, idnex) in caseLists.recommend_designer_list">
            <div class="item">
                <div class="imgbox">
                    <img :src="item.designer.avatar" alt="">
                </div>
                <div class="detail">
                    <p>{{ item.designer.nick }}</p>
                    <p>{{ item.designer.construction }}</p>
                    <p v-show="item.designer.ranking_tag">
                        <img src="../assets/images/renovation-Icon/ic_usercenter_designer_rank.png" alt="">
                        <span>{{ item.designer.ranking_tag }}</span>
                    </p>
                    <p class="tag"><span v-for="(tag, index) in item.designer.recommend_text2" :key="index">{{ tag
                    }}</span></p>
                    <p><span>价格</span>{{ item.designer.price_range }}</p>
                </div>

            </div>
            <van-swipe :loop="false" :width="250" :show-indicators="false">
                <van-swipe-item v-for="(pic, index) in item.designer.last_photos_statsign">
                    <img :src="pic.article.pic_url" alt="">
                    <p class="name">{{ pic.article.title }}</p>
                    <p class="money">{{ pic.article.desc }} </p>
                </van-swipe-item>
            </van-swipe>
            <van-popup v-model:show="show" position="top" :style="{ height: '80%' }">
                <van-index-bar v-for="(item, index)  in indexList" :key="index">
                    <van-index-anchor v-for="(val, key, i) in item" :key="i" :index="key">{{ key }}</van-index-anchor>
                    <div v-for="(val, key, i) in item" :key="i" :index="key">
                        <van-cell v-for="(city, k) in val" :key="k" :title="city" @click="changeCity(city)" />
                    </div>
                </van-index-bar>
            </van-popup>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.company {
    .van-swipe-item {
        padding-right: 20px;

        .name {
            font-size: 16px;
            font-weight: bold;
        }

        .money {
            color: #38b1af;
            font-size: 16px;

            span {
                font-size: 12px;
            }
        }

        img {
            width: 250px;
            height: 150px;
            border-radius: 10px;
        }
    }

    .item {
        margin-top: 20px;
        display: flex;
        margin-bottom: 10px;

        .distance {
            color: #a8a8a8;
            height: 20px;
        }

        .detail {
            flex: 1;
            margin-left: 15px;

            p {
                font-size: 14px;
                margin-bottom: 5px;

                &:nth-child(1) {
                    font-weight: bold;
                    font-size: 15px;
                }

                &:nth-child(2) {
                    color: #999999;
                }

                &.tag {
                    display: flex;

                    img {
                        width: 100px;
                        height: 24px;
                    }

                    span {
                        padding: 2px 5px;
                        display: inline-block;
                        color: #d1ae76;

                    }

                }

                &:nth-child(3) {
                    display: flex;

                    img {
                        width: 100px;
                        height: 24px;
                    }

                    span {
                        padding: 2px 5px;
                        display: inline-block;
                        background-color: #fef2e4;
                        color: #d1ae76;

                    }

                }

                &:nth-child(4) {
                    span {
                        padding: 2px;
                        color: #c0c0c1;
                        border: 1px solid #c0c0c1;
                        margin-right: 5px;
                        border-radius: 4px;
                    }
                }

                &:nth-child(5) {
                    span {
                        padding: 2px;
                        color: white;
                        border-radius: 4px;
                        margin-right: 5px;
                        background-color: #fd844a;
                    }
                }
            }
        }

        .imgbox {
            width: 50px;
            height: 50px;

            img {
                border-radius: 999%;
                width: 100%;
            }
        }
    }
}

.van-swipe-item {
    &:nth-child(1) {
        .imgbox {
            .mask {
                background: rgb(127, 118, 88);
                background: linear-gradient(90deg, rgba(127, 118, 88, 1) 0%, rgba(255, 255, 255, 0.5) 99%);
            }
        }
    }

    &:nth-child(2) {
        .imgbox {
            .mask {
                background: rgb(153, 109, 67);
                background: linear-gradient(90deg, rgba(153, 109, 67, 1) 0%, rgba(255, 255, 255, 0.5) 99%);
            }
        }
    }

    &:nth-child(3) {
        .imgbox {
            .mask {
                background: rgb(57, 58, 91);
                background: linear-gradient(90deg, rgba(57, 58, 91, 1) 0%, rgba(255, 255, 255, 0.5) 99%);
            }
        }
    }

    &:nth-child(4) {
        .imgbox {
            .mask {
                background: rgb(108, 145, 177);
                background: linear-gradient(90deg, rgba(108, 145, 177, 1) 0%, rgba(255, 255, 255, 0.5) 99%);
            }
        }
    }
}

.swiperitem {
    display: flex;
    align-items: center;
    background-color: #fafafa;

    .user {

        padding: 15px 10px;
        position: relative;

        img {
            &:nth-child(1) {
                width: 30px;
                height: 30px;
                border-radius: 999%;
            }

            &:nth-child(2) {
                width: 30px;
                height: 12px;
                position: absolute;
                bottom: 10px;
            }
        }
    }

    .namebox {
        flex: 1;
        font-size: 12px;
    }
}


.swiperitemlist {
    padding-left: 10px;
    display: flex;
    flex-direction: column;

    .mask {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        p {
            margin-left: 20px;
            font-size: 16px;
            font-weight: bold;
            color: white;
        }
    }

    .imgbox {
        position: relative;
        height: 50px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        img {
            position: absolute;
            width: 100%;
            height: 50px;
            z-index: -1;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px
        }
    }
}



body {
    background-color: #ffffff;
}

.ranking {
    margin-top: 20px;
    margin-bottom: 20px;

    .topbar {
        display: flex;
        justify-content: space-between;

        p {
            &:nth-child(1) {
                font-weight: bold;
                font-size: 16px;

            }

            &:nth-child(2) {
                color: #afafaf;

            }
        }
    }
}

.renovationoption {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .item {
        p {
            &:nth-child(1) {
                font-size: 17px;
                font-weight: bold;
            }

            &:nth-child(2) {
                font-size: 15px;
                font-weight: bold;

            }

            &:nth-child(3) {
                font-size: 12px;
                color: #c2c2c2;
            }
        }

        border: 1px solid #f0f0f0;
        position: relative;

        .icon {
            img {
                position: absolute;
                width: 20px;
                height: 20px;
                right: 15px;
                top: 20px;
            }
        }

        width: 29%;
        padding: 15px 5px;

        &:nth-child(1) {
            background: rgb(255, 255, 255);
            background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 240, 227, 1) 100%);
        }

        &:nth-child(2) {

            background: rgb(255, 255, 255);
            background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(226, 217, 250, 1) 100%);
        }

        &:nth-child(3) {
            background: rgb(255, 255, 255);
            background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(226, 249, 254, 1) 100%);
        }

        border-radius: 5px;
    }
}

.renovation {
    padding: 10px 20px;
    box-sizing: border-box;

    .topbaritem {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input {
            margin: 0 15px;
            flex: 1;

            .van-search {
                padding: 0;

            }
        }
    }

}
</style>

